<template>
	<view class="content">
		<j-electric :ElectricQuantity="electricity" isElectric></j-electric>
		<view class="" style="padding: 20rpx;">拉流：</view>
		<live-player id="pullLive" :src="src2" :autoplay="isPlay" @statechange="statechange" @error="error"
			style="width: 100%; height: 250px;">
			<cover-view
				style="position: absolute;right: 20rpx;top: 20rpx;width: 100rpx;height: 60rpx;background: orange;"
				@tap.stop.prevent="onBindtapFullScreen">
			</cover-view>
		</live-player>
		<live-player id="pullLive2" :src="src2" :autoplay="isPlay" @statechange="statechange" @error="error"
			style="width: 100%; height: 250px;margin-top: 10rpx;">
			<cover-view
				style="position: absolute;right: 20rpx;top: 20rpx;width: 100rpx;height: 60rpx;background: orange;"
				@tap.stop.prevent="onBindtapFullScreen">
			</cover-view>
		</live-player>
		<live-player id="pullLive3" :src="src2" :autoplay="isPlay" @statechange="statechange" @error="error"
			style="width: 100%; height: 250px;margin-top: 10rpx;">
			<cover-view
				style="position: absolute;right: 20rpx;top: 20rpx;width: 100rpx;height: 60rpx;background: orange;"
				@tap.stop.prevent="onBindtapFullScreen">
			</cover-view>
		</live-player>
		<input type="text" placeholder="播放地址" v-model="src2" @blur="onBlur"
			style="background: lightgray;margin: 30rpx;padding: 20rpx;">
		<input type="text" placeholder="修改电量" v-model="electricity2" @blur="onBlur"
			style="background: lightgray;margin: 30rpx;padding: 20rpx;">
		<view class="btn">
			<view class="voice" @click="startPlay">开始播放</view>
			<view class="voice" @click="stopPlay">停止播放</view>
		</view>
		<view class="" style="padding: 20rpx;">推流：</view>
		<view class="live">
			<live-pusher id="pushLive" class="live" :url="src2" mode="RTC" :autopush="isPush" :enable-camera="isCamera"
				:enable-agc="true" :enable-mic="isMic" :enable-ans="true" @statechange="statechange2"
				@netstatus="netstatus" @error="error2" audio-volume-type="voicecall" :max-bitrate="600"
				audio-quality="low" />
		</view>
		<view class="cont">
			<input type="text" placeholder="请输入推流地址" v-model="src2" :maxlength="-1"
				style="background: lightgray;margin-top: 20rpx;padding: 20rpx;width: 90%;">
			<view class="btn">
				<view class="voice" @click="startPush">开始推送</view>
				<view class="voice" @click="stopPush">停止推送</view>
			</view>
		</view>
		<video id="video" style="width: 100%" :src="videoUrl2" :custom-cache="false" :show-bottom-progress="false"
			@ended="ended" @error="error3"></video>
		<view class="cont">
			<input type="text" placeholder="请输入地址" v-model="videoUrl2" :maxlength="-1"
				style="background: lightgray;margin-top: 20rpx;padding: 20rpx;width: 90%;margin-bottom: 30rpx;"
				@blur="videoUrlInput">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentVideo: {
					url: 'https://obs-cn-gwp-01.obs.cn-east-3.myhuaweicloud.com/003_bdb2fa94d9e3e022_230428124337_1682653419-1.mp4?AWSAccessKeyId=GT48ZB1VCUKYF0KF7OSK&Expires=1682751814&Signature=R8x%2BOlNNRlKMlA8ZUkqauG2OIHE%3D',
				}, // 
				// videoUrl:'https://devstreaming-cdn.apple.com/videos/wwdc/2019/506lqy7sprpfyo800/506/0640c/prog_index.m3u8',
				videoUrl: 'https://obs-cn-gwp-01.obs.cn-east-3.myhuaweicloud.com:443/003_5733a762199c7a4f_230505110910_1683256150-1.mp4?AWSAccessKeyId=GT48ZB1VCUKYF0KF7OSK&Expires=1683360120&Signature=ZphaauiowY7ET2ozv3k%2BKi8kKxQ%3D', //成功的
				// videoUrl:'https://obs-cn-gwp-01.obs.cn-east-3.myhuaweicloud.com:443/003_bdb2fa94d9e3e022_230428124337_1682653419-1.mp4?AWSAccessKeyId=GT48ZB1VCUKYF0KF7OSK&Expires=1682750960&Signature=EE%2F98auh4NvHX2NhUuo3NGPz0ps%3D', 
				title: 'Hello',
				src1: 'rtmp://10.10.29.111/live/123456',
				src2: 'rtmp://gwm-000-cn-0736.bcloud365.net:1935/d523c7bb96b87d3f/252301900',//'rtmp://10.10.29.111/live/123456',
				// src2:'rtmp://122.9.143.195:8888/media?type=ts&mediaType=hls&token=YWNiZTQxOWI0NnxkMjQzYjBmZjQ4NDQwOTFkfGV5SndJam9pVjNkcFYzSm9NbGtpTENKMU4lqb2lZV1J0YVc0aWZRPT18MTY2ODc5NDkwNDQzNHxnd218MTAxLjY5LjI0Mi4xMHxtZDU%3D.940b4c2b8052e9ece96e168cc64709a4&userToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJycyIsImFwcEtleSI6ImU5NzgzM2RjOGIxZjQ3MzM5YWFmNzI4ZjQ2MDc5NzFhIiwiZXhwIjoxNjcxMzUwOTA0LCJ0eXBlIjoiY29tIiwiYWNjb3VudCI6IjE1NTMzMzQ3M2U2ODRlMTI4NTA5YmIxODk2YzdhZmRhIn0.bQFGw6Qv0FvvH2SVeQg21RTro9ttQPg2aRssDCeX344.1%0A&channel=0&stream=1',
				isCamera: true,
				isMic: true,
				muted: false,
				isPush: false,
				isPlay: false,
				pullVideoContext: {},
				pullVideoContext2: {},
				pullVideoContext3: {},
				pushVideoContext: {},
				isFullScreen: false,
				freshing: false,
				triggered: true,
				currentHeight: 0, // 滑动组件当前高度
				scrollViewHeight: 0, //用于计算滚动区域高度
				electricity: 100,
				electricity2: 100,
				videoContext: null,
				canvasContext: null,
				videoUrl2:'https://obs-cn-gwp-01.obs.cn-east-3.myhuaweicloud.com:443/003_149881612f65789c_20231125151908_1700896794-0.m3u8?AWSAccessKeyId=GT48ZB1VCUKYF0KF7OSK&Expires=1701225724&Signature=KMOpjx5lSSu5AOgZbGFpq56LUaE%3D',
				videoUrl3:'https://obs-cn-gwp-01.obs.cn-east-3.myhuaweicloud.com:443/003_bad8eaf9146b95bf_231128104826_1701139700-1.m3u8?AWSAccessKeyId=GT48ZB1VCUKYF0KF7OSK&Expires=1701226212&Signature=f7p0XzdiJr25yhQYXyg2Z0t6lj8%3D'
			}
		},
		onLoad(opt) {
			// let dev = JSON.parse(opt.device)
			// this.src2 = `http://122.9.143.195:8888/talk?token=${dev.token}&userToken=${uni.getStorageSync('accessToken')}&channel=0`
			// console.log('推流地址：---------',this.src2);
			this.pullVideoContext = uni.createLivePlayerContext('pullLive')
			this.pullVideoContext2 = uni.createLivePlayerContext('pullLive2')
			this.pullVideoContext3 = uni.createLivePlayerContext('pullLive3')
			this.pushVideoContext = uni.createLivePusherContext('pushLive')
			console.log('pullVideoContext=======', this.pullVideoContext);
			console.log('pushVideoContext=======', this.pushVideoContext);
			// this.keepRequestUntillRight()
		},
		onReady() {
			this.videoContext = wx.createVideoContext('myVideo');
			console.log('videoContext===', this.videoContext);
			// this.creatCAnvas()
			wx.createSelectorQuery().select('.myVideo').context(function(res) {
				console.log('myVideo====', res
					.context) // 节点对应的 Context 对象。如：选中的节点是 <video> 组件，那么此处即返回 VideoContext 对象
			}).exec()

		},
		methods: {
			zoomIn() {
				console.log('放大');
				// 增加视频尺寸
				this.videoContext.play(); // 需要播放一下，否则可能不会立即更新尺寸
				this.videoContext.width += 50;
				this.videoContext.height += 50;
			},
			zoomOut() {
				console.log('缩小');
				// 减小视频尺寸
				this.videoContext.play();
				this.videoContext.width -= 50;
				this.videoContext.height -= 50;
			},
			onBlur() {
				console.log('失去焦点', this.electricity2);
				this.electricity = this.electricity2
			},
			goWebview() {
				uni.navigateTo({
					url: './testWebview'
				})
			},
			goUserManage() {
				uni.navigateTo({
					url: '../device/device-live/door-lock/userManage/userManage'
				})
			},
			setScrollHeight(val) { // 实时返回的滑动组件高度
				this.currentHeight = val
				console.log('setScrollHeight==1', val);
			},
			setScrollViewHeight(val) { //最大高度
				this.scrollViewHeight = val
				console.log('setScrollViewHeight==2', val);
			},
			onPulling(e) {
				console.log('onPulling:', e)
			},
			onRefresh() {
				if (this.freshing) return
				this.freshing = true
				this.triggered = true
				setTimeout(() => {
					this.triggered = false
					this.freshing = false
				}, 2000)
			},

			onRestore(e) {
				console.log('onRestore:', e)
			},

			onAbort(e) {
				console.log('onAbort', e)
			},



			ended(e) {
				console.log('结束===', e);
			},
			error3(e) {
				console.log('错误信息', e);
			},
			// 全屏
			onBindtapFullScreen(ev) {
				console.log('全屏：', ev);
				// this.videoContext.requestFullScreen();
				// this.isFullScreen = true
				console.log('全屏---------', this.pullVideoContext);
				this.isFullScreen = !this.isFullScreen
				if (this.isFullScreen) {
					this.pullVideoContext.requestFullScreen({
						direction: 90,
						success: (e) => {
							console.log('全屏success---------');
							this.isFullScreen = true
						},
						complete: (e) => {
							console.log('全屏-complete--------');
						}
					})
				} else {
					this.onBindtapExitFullScreen()
				}
			},

			// 取消全屏
			onBindtapExitFullScreen(ev) {
				console.log('取消全屏：');
				// this.videoContext.exitFullScreen();
				// this.isFullScreen = false
				this.pullVideoContext.exitFullScreen({
					success: (e) => {
						console.log('取消全屏---------');
						this.isFullScreen = false
					},
				})
			},

			//开始播放
			startPlay() {
				this.isPlay = true
				this.pullVideoContext.play()
				this.pullVideoContext2.play()
				this.pullVideoContext3.play()
				uni.showToast({
					title: '播放成功',
					icon: 'none'
				})
			},
			//停止播放
			stopPlay() {
				this.pullVideoContext.stop()
				uni.showToast({
					title: '停止播放成功',
					icon: 'none'
				})
			},
			//开始推送
			startPush() {
				console.log('开始推送');
				this.isPush = true
				this.pushVideoContext.start()
				uni.showToast({
					title: '推送成功',
					icon: 'none'
				})
			},
			//停止推送
			stopPush() {
				console.log('停止推送');
				this.isPush = false
				this.pushVideoContext.stop()
				uni.showToast({
					title: '停止推送成功',
					icon: 'none'
				})
			},
			/////////////////--------------
			showMic() {
				this.isMic = !this.isMic
			},
			showCamera() {
				this.isCamera = !this.isCamera
			},
			//-----------------推流------------
			statechange(e) {
				console.log('拉流live-player code:', e.detail)
				let code = e.detail.code
				if (code == 2003) {
					console.log('2003====', this.getCurrentTime());
				}
				if (code == 2004) {
					console.log('2004====', this.getCurrentTime());
				}
			},
			statechange2(e) {
				console.log('推流live-pusher code:', e.detail.code)
			},
			error(e) {
				console.error('拉流live-player error:', e.detail.errMsg)
			},
			error2(e) {
				console.error('推流live-pusher error:', e.detail.errMsg)
			},
			netstatus(e) {
				console.log("netstatus:" + JSON.stringify(e));
			},
			videoUrlInput() {
				this.keepRequestUntillRight()
			},
			//获取当前时间
			getCurrentTime() {
				let time = new Date()
				let time1 = time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds() + ':' + time
					.getMilliseconds()
				return time1
			},
			keepRequestUntillRight() {
				uni.request({
					method: 'GET',
					url: this.videoUrl,
					success: (res) => {
						if (res.statusCode == 200) {
							this.currentVideo.url = this.videoUrl
						} else if (res.statusCode == 400) {
							uni.showModal({
								title: '提示',
								content: res.data,
								showCancel: false
							});
						} else {
							setTimeout(() => {
								this.keepRequestUntillRight();
							}, 1000);
						}
					},
					fail: (err) => {
						console.log('error:', err);
					}
				});
			}
		}
	}
	/**
	export default {
		data() {
			return {
				time:'',
				isCamera:false,
				isMic:true,
				muted:false,
				src:'rtmp://10.10.29.111/live/123456',
				src1:'rtmp://10.10.29.111/live/123456',
				pullVideoContext:{},
				isFullScreen:false,
				screenHeight:uni.getSystemInfoSync().screenHeight +'px',
				screenWidth:uni.getSystemInfoSync().screenWidth + 'px',
				orientation:'vertical',
				
			}
		},
		onLoad() {
			console.log('screenHeight:',this.screenHeight);
			console.log('screenwidth:',this.screenWidth);
			this.pullVideoContext = uni.createLivePlayerContext('pullLive')
			console.log('this.pullVideo',this.pullVideoContext);
		},
		methods: {
			
			//全屏
			fullScreenAction(){
				this.isFullScreen = !this.isFullScreen
				if(this.isFullScreen){
					// this.orientation = 'horizontal'
					this.pullVideoContext.requestFullScreen({
						direction: 90,
						success:(e)=> {
							console.log('全屏------------');
						},
						error:(err)=>{
							console.log('全屏错误====',err);
						}
					})
				}else{
					this.orientation = 'vertical'
					this.pullVideoContext.exitFullScreen({
					    success:(e)=> {
							console.log('取消全屏---------');
					    },
						error: (err) => {
							console.log('取消全屏错误---------');
						}
					})
				}
			},
			
			bindPickerChange(e) {
			    console.log('picker发送选择改变，携带值为', e.detail.value)
			},
			//-----------------推流------------
			statechange2(e) {
			    console.log('live-pusher code:', e.detail.code)
			},
			netstatus(e) {
				console.log("netstatus:" + JSON.stringify(e));
			},
			error2(e) {
				console.log("error:" + JSON.stringify(e));
			}, 
			showMic(){
				this.isMic = !this.isMic
			},
			showCamera(){
				this.isCamera = !this.isCamera
			},
					  
			testPay(){
				// 仅作为示例，非真实参数信息。
				uni.requestPayment({
				    provider: 'wxpay',
					timeStamp: String(Date.now()),
					nonceStr: 'A1B2C3D4E5',
					package: 'prepay_id=wx20180101abcdefg',
					signType: 'MD5',
					paySign: '',
					success: function (res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function (err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			//-----------------拉流------------
			statechange(e){
				console.log('live-player code:', e.detail.code)
			},
			error(e){
			    console.error('live-player error:', e.detail.errMsg)
			} ,
		}
	}
	*/
</script>

<style lang="scss">
	.video-container {
		position: relative;
		width: 70%;
		height: 200px;
	}

	.video {
		width: 100%;
	}

	.full1 {}

	.full {
		transform: rotate(90deg) !important;
		width: 640px !important;
		height: 360px !important;
		transform-origin: left top !important;
	}

	.btn {
		display: flex;
		justify-content: space-between;
		padding: 50rpx;
	}

	.content {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
	}

	.live {
		width: 350rpx;
		height: 350rpx;
		/* background: orange; */
		margin: auto;
		border-radius: 25rpx;
	}

	.jfc {
		justify-content: center;
		display: flex;
		align-items: center;
		color: white;
	}

	.cont {
		padding: 20rpx;
	}

	.voice {
		background: orange;
		width: 200rpx;
		height: 80rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		color: white
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.pullUp {
		position: absolute;
		background: #F5F4F5;
		left: 0rpx;
		right: 0rpx;
		top: 0rpx;
		height: 100rpx;
		z-index: 12;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 106rpx;
			height: 62rpx;
			margin: auto;
		}
	}
</style>
